<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group">
			<view class="flex-col">
				<view class="flex-row justify-between items-center section_3" @click="toHead">
					<text class="font_1">头像</text>
					<image class="switch" :src="data.content.avatar_path" v-if="data.content.avatar_path!=''" />
					<image class="switch" src="/static/head.png" v-else />
				</view>
				<view class="flex-row justify-between input">
					<text class="font_1 text">昵称</text>
					<input type="text" class="text_2" placeholder="请输入您的昵称" v-model="data.content.nickname">
				</view>
				<view class="flex-row justify-between items-center input view" @click="toPhone">
					<text class="font_1">更换手机号</text>
					<view class="flex-row space-x-6">
						<text class="text_3">{{data.content.account}}</text>
						<image class="shrink-0 image_8" src="/static/more1.png" />
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button text-wrapper" @click="toConf"><text class="text_4">确认</text></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()

	let data = ref({
		show: false,
		columns: [],
		array: ['男', "女"],
		index: 0,
		content: {
			avatar_path: ''
		},
		avatarId: '',
		points: 0,
		show1: false,
		desc: '',
		date: '',
		dateShow: '',
	})
	onShow(() => {
		getDate()
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo, {
			member_id: uni.getStorageSync('member_id')
		}).then(res => {
			console.log(res, "获取用户资料");
			if (res.flag == "success") {
				data.value.content = res.data
				let url =data.value.content.avatar_path.split('com/')
				data.value.content.avatar_path ='https://libc-ddanm.bujufangshi.com/'+ url[1]
				data.value.avatarId = res.data.avatar
				data.value.dateShow = res.data.birthday
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const toHead = () => {
		uni.chooseImage({
			count: 1, //默认9
			success: function(res) {
				console.log(res.tempFilePaths);
				proxy.$req.upload(proxy.$api.SystemInfo.upload, res.tempFilePaths[0], 1).then((res) => {
					console.log(res, "上传");
					if (res.flag == "success") {
						let url =res.data.list[0].abs_url.split('com/')
						data.value.content.avatar_path ='https://libc-ddanm.bujufangshi.com/'+ url[1]
						data.value.avatarId = res.data.list[0].id
						console.log(data.value,"data");
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					// let imgData = JSON.parse(res.data.replace('\uFEFF', ''))

				})
			}
		})
	}
	const toConf = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.setData, {
			avatar: data.value.avatarId,
			nickname: data.value.content.nickname,
			member_id: uni.getStorageSync('member_id')
		}).then(res => {
			console.log(res, "修改资料");
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		})
	}
	const toPhone=()=>{
		uni.navigateTo({
			url:'/pages/phone/phone'
		})
	}
	const timestampToTime = () => {
		let date = new Date().getDate();
		let Y = date.getFullYear() + '-';
		let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		let D = date.getDate() + ' ';
		let h = date.getHours() + ':';
		let m = date.getMinutes();
		let s = date.getSeconds();
		return Y + M + D;
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.group {
			padding-bottom: 56rpx;

			.section_3 {
				padding: 30rpx;
				background-color: #ffffff;

				.switch {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}

			.input {
				padding: 38rpx 30rpx;
				background-color: #ffffff;

				.text {
					line-height: 26rpx;
				}

				.text_2 {
					color: #111;
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 26rpx;
					text-align: right;
				}

				.space-x-6 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 6rpx;
					}

					.text_3 {
						color: #333333;
						font-size: 28rpx;
						font-family: PingFangHeiTC;
						line-height: 22rpx;
					}

					.image_8 {
						width: 9rpx;
						height: 18rpx;
					}
				}
			}

			.font_1 {
				font-size: 28rpx;
				font-family: PingFangSC;
				line-height: 27rpx;
				color: #333333;
			}

			.view {
				margin-top: 20rpx;
			}

			.text-wrapper {
				padding: 34rpx 0;
				background-color: #54bc6e;
				background-image: linear-gradient(0deg, #00a796 0%, #54bc6e 100%);
				border-radius: 24rpx;
				width: 630rpx;
				align-self: center;
				position: fixed;
				bottom: 40rpx;
				.text_4 {
					color: #ffffff;
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 30rpx;
				}
			}
		}
	}
</style>